<template>
    <div>
        <p>姓名:{{otherperson.name}}</p>
        <p>年龄:{{otherperson.age}}</p>
        <button type="button" @click="otherperson.name+='```'">修改姓名</button>
        <button type="button" @click="otherperson.age++">修改年龄</button>
    </div>
    <br/>
    <div>
      <p>当前鼠标的坐标使用hooks实现：
        x:{{ point.x }};y:{{ point.y }};
      </p>
    </div>
    </template>
    
    <script setup>
    let nameVal = ref('john');
    let ageVal = ref(100);
    let otherperson = ref({
        name: nameVal,
        age: ageVal
    });
    
    //hooks
    const point= reactive({
      x:0,
      y:0
    });
     function setPoint(e){
      point.x=e.x;
      point.y=e.y;
    }
    onMounted(() => {
      window.addEventListener('click', setPoint);
    });
     //清除监听
    onBeforeMount(() => {
      window.removeEventListener('click', setPoint);
    });
    </script>
    
    <style lang="less" scoped>
    body {
        width: 100px;
        height: 100px;
        background: #fff;
    }
    </style>
    <!-- 在hooks实现 
    // src/hooks/useMousePosition.js
    import { ref, onMounted, onUnmounted } from 'vue'
    export default function useMousePosition() {
    const point= reactive({
      x:0,
      y:0
    });
      const updateMouse = (e) => {
        point.x = e.x
        point.y = e.y
      }
      onMounted(() => {
        window.addEventListener('mousemove', updateMouse)
      })
      onUnmounted(() => {
        window.removeEventListener('mousemove', updateMouse)
      })
      return  point;
    }
    在app.vue中引入useMousePosition.js hooks
    import useMousePosition from '../hooks/useMousePosition'
    就可以去掉app.vue中的代码中定于ponit 及相关方法
    -->